<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看店铺绩效" v-model="visible" append-to-body width="1000px" @close="handleClose">
    <el-tabs v-model="activeName">
      <el-tab-pane label="配送绩效" name="distribution_performance">
        <vxe-table :data="form.distribution_performance" class="w-full">
          <vxe-column title="" field="item_name" minWidth="120"></vxe-column>
          <vxe-column title="当前" field="current" minWidth="100"></vxe-column>
          <vxe-column title="明细" field="detail" minWidth="200">
            <template #default="{row}">
              {{ row.detail }}
            </template>
          </vxe-column>
          <vxe-column title="目标" field="target" minWidth="100"></vxe-column>
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="客户服务绩效" name="customer_service_performance">
        <vxe-table :data="form.customer_service_performance" class="w-full">
          <vxe-column title="" field="item_name" minWidth="140"></vxe-column>
          <vxe-column title="目标" field="target" minWidth="100"></vxe-column>
          <vxe-column title="FBM" field="fbm" minWidth="200"></vxe-column>
          <vxe-column title="FBA" field="fba" minWidth="100"></vxe-column>
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="政策合规性" name="policy_compliance">
        <div class="flex mb-3">
          <div><strong>目标</strong>: {{ form.policy_compliance.targetValue }}</div>
          <div class="ml-5"><strong>账户状况评级</strong>: {{ form.policy_compliance.accountStatusRating }}</div>
        </div>
        <vxe-table :data="form.policy_compliance.data" :show-header="false">
          <vxe-column title="" field="title" minWidth="140"></vxe-column>
          <vxe-column title="目标" field="value" minWidth="100"></vxe-column>
        </vxe-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import api from './api'
const load = ref(false)
const visible = ref(false)
const activeName = ref('distribution_performance')
const form = ref({})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  activeName.value = 'distribution_performance'
  form.value = {
    distribution_performance: [],
    customer_service_performance: [],
    policy_compliance: [],
  }
  if (!load.value) {
    load.value = true
    await 1
  }
  try {
    const res = await api.performance({ shop_id })
    const {distribution_performance, customer_service_performance, policy_compliance} = res.data
    form.value.distribution_performance = distribution_performance
    form.value.customer_service_performance = customer_service_performance
    form.value.policy_compliance = policy_compliance
    form.value.policy_compliance.data = [
      {title: '涉嫌侵犯知识产权', value: policy_compliance.receivedIntellectualPropertyComplaints},
      {title: '知识产权投诉', value: policy_compliance.intellectualPropertyComplaints},
      {title: '商品真实性买家投诉', value: policy_compliance.productAuthenticityCustomerComplaints},
      {title: '商品状况买家投诉', value: policy_compliance.productConditionCustomerComplaints},
      {title: '上架政策违规', value: policy_compliance.listingPolicyViolations},
      {title: '违反受限商品政策', value: policy_compliance.restrictedProductPolicyViolations},
      {title: '违反买家商品评论政策', value: policy_compliance.customerProductReviewsPolicyViolations},
      {title: '其他违反政策', value: policy_compliance.otherPolicyViolations},
      {title: '违反政策警告', value: policy_compliance.policyViolationWarnings},
    ]
    visible.value = true
  } catch (error) {
    console.log('error', error)
  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>